<template>
  <div class="index">
    <div class="main">
      <div class="child1">
        功能:<el-tag>文件分享功能</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;
        下载:<el-link  style="
background-color: #fdf6ec;
border-color: #faecd8;
color: #e6a23c;
display: inline-block;
height: 32px;
padding: 0 10px;
line-height: 30px;
font-size: 12px;
border-width: 1px;
border-style: solid;
border-radius: 4px;
box-sizing: border-box;
white-space: nowrap;" type="warning"  @click="downloadbtn()">下载文件</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <el-divider></el-divider>
      <div class="child2">
        <br>
        <img src="@/zip.png">
        <div>{{ name }}</div>
        <br>
        <div>MD5值:
          <el-tag>{{ md5 }}</el-tag>
        </div>
        <div>分享时间:
          <el-tag>{{ createTime }}</el-tag>
        </div>
        <div>文件大小:
          <el-tag>{{ fileSize }}</el-tag>
        </div>
      </div>
    </div>
    <div class="rightmain">
      <!--    <div class="child2">-->
      <!--      <img src="@/zip.png">-->
      <!--    </div>-->
      <div>
        <div>
          <br>
          <img class="iconimg" src="@/icon.jpg">
        </div>
        <br>
        分享者:
        <el-tag type="">{{ createBy }}</el-tag>&nbsp;
      </div>
    </div>
  </div>
</template>

<script>
import {info,downloadCheck} from "@/api/filesys/sharing";

export default {
  data() {
    return {
      createBy: "",
      id: "",
      filePath: "",
      fileSize: "",
      md5: "",
      createTime: "",
      name: "",
      sharingPath: "",
      isDir: false,
    }
  },
  created() {
    if (this.$route.params && this.$route.params[0]) {
      let parameters = {};
      parameters.sharingPath = this.$route.params[0]
      // vue从路径中获取参数 此处参数名为id
      info(parameters).then(res => {
        console.log(res.data.data)
        let filedata = res.data.data
        this.createBy = filedata.createBy
        this.filePath = filedata.filePath
        this.fileSize = filedata.fileSize
        this.md5 = filedata.md5
        this.createTime = filedata.createTime
        this.name = filedata.name
        this.sharingPath = filedata.sharingPath
        this.isDir = filedata.isDir
        this.id = filedata.id
      })
    }
  },
  methods: {
    downloadbtn() {
      this.$prompt('请输入文件分享验证码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        let parameters = {};
        parameters.code = value
        parameters.fileId = this.id
        // vue从路径中获取参数 此处参数名为id
        downloadCheck(parameters).then(res => {
          if (res.data.size==74){
            this.$message({
              type: 'error',
              message: '验证码错误'
            });
          }
          const filename = res.headers["content-disposition"];
          const blob = new Blob([res.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);//创建下载的链接
          downloadElement.href = href;
          downloadElement.download = decodeURIComponent(filename.split("filename=")[1]); //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href);    //释放掉blob对象
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });

    },



  }
};
</script>

<style>
.index {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #f7f7f7;

}

.main {
  position: absolute;
  top: 20%;
  left: 25%;
  height: 60%;
  width: 40%;
  /*margin: -15% 0 0 -25%;*/
  vertical-align: middle;
  text-align: center;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}

.child1 {
  margin: 15px;
}

.child2 {
  height: 75%;
  margin: 15px;
  background-color: #f6f9fd;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.rightmain {
  position: absolute;
  top: 20%;
  left: 66%;
  height: 60%;
  width: 10%;
  /*margin: -15% 0 0 -25%;*/
  vertical-align: middle;
  text-align: center;
  background-color: #f3f8ff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}

#app {
  font-size: 12px;
  line-height: 1.5;
  color: #666;
}

.iconimg {
  width: 100px;
  height: 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50px;
}
</style>
